<template>
  <div class="add-car">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: true, resize: true }"
      title="车辆预留列表及修改"
      :close-on-click-modal="false"
      :visible.sync="md.state"
      @close="closeMd"
      v-if="md.state"
      :width="'800px'"
    >
      <el-tabs v-model="tabActiveKey" @tab-click="handleTabClick">
        <el-tab-pane label="有车号预留列表" name="1">
          <el-button type="primary" @click="handleDel">删除预留车辆</el-button>
          <el-button type="primary" @click="handleEdit">修改预留车辆</el-button>
          <div style="margin-bottom: 15px">
            <el-table
              :data="tableData"
              style="width: 100%"
              @select="selRow"
              @expand-change="saveRowExpand"
            >
              <el-table-column type="selection" prop="id"></el-table-column>
              <el-table-column prop="plateNum" label="车牌号">
              </el-table-column>
              <el-table-column prop="reserveStime" label="开始时间" width="180">
              </el-table-column>
              <el-table-column prop="reserveEtime" label="结束时间" width="180">
              </el-table-column>
              <!-- <el-table-column prop="reserveCount" label="预留数量">
              </el-table-column>
              <el-table-column prop="seats" label="座位"> </el-table-column> -->

              <el-table-column prop="note" label="预留说明"> </el-table-column>
            </el-table>
          </div>
          <el-form
            v-if="isShowEditInput"
            :model="fm.ps"
            :ref="fm.fname"
            :label-width="'100px'"
            class="demo-form-inline"
            @keyup.enter.native="onSubmit"
          >
            <el-row>
              <el-col>
                <el-form-item
                  label="预留时间"
                  prop="reserveStime"
                  style=""
                  :rules="[
                    {
                      required: true,
                      message: '请选择预留时间',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="fm.ps.reserveStime"
                    type="date"
                    placeholder="预留开始时间"
                  >
                  </el-date-picker>
                  至
                  <el-date-picker
                    v-model="fm.ps.reserveEtime"
                    type="date"
                    placeholder="预留结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="预留备注" prop="note">
                  <el-input
                    type="textarea"
                    placeholder="请填写预留备注"
                    maxlength="500"
                    show-word-limit
                    v-model="fm.ps.note"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="text-align: center">
              <el-col>
                <el-form-item prop="find">
                  <el-button
                    @click="onSubmit"
                    :disabled="fm.sb.load"
                    type="primary"
                  >
                    {{ fm.sb.text }}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="无车号预留列表" name="2">
          <el-button type="primary" @click="handleDel">删除预留车辆</el-button>
          <el-button type="primary" @click="handleEdit">修改预留车辆</el-button>
          <div style="margin-bottom: 15px">
            <el-table
              :data="tableData2"
              style="width: 100%"
              @select="selRow"
              @expand-change="saveRowExpand"
            >
              <el-table-column type="selection" prop="id"></el-table-column>
              <el-table-column prop="plateNum" label="车牌号">
              </el-table-column>
              <el-table-column prop="reserveStime" label="开始时间">
              </el-table-column>
              <el-table-column prop="reserveEtime" label="结束时间">
              </el-table-column>
              <el-table-column prop="reserveCount" label="预留数量">
              </el-table-column>
              <el-table-column prop="seats" label="座位"> </el-table-column>

              <el-table-column prop="note" label="预留说明"> </el-table-column>
              <el-table-column prop="opra" label="操作" width="100">
                <template slot-scope="scope"
                  ><el-button type="text" @click="handleSearchCar(scope)"
                    >查看车辆</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-form
            v-if="isShowEditInput"
            :model="fm.ps"
            :ref="fm.fname"
            :label-width="'100px'"
            class="demo-form-inline"
            @keyup.enter.native="onSubmit"
          >
            <el-row>
              <el-col>
                <el-form-item
                  label="预留时间"
                  prop="reserveStime"
                  style=""
                  :rules="[
                    {
                      required: true,
                      message: '请选择预留时间',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="fm.ps.reserveStime"
                    type="date"
                    placeholder="预留开始时间"
                  >
                  </el-date-picker>
                  至
                  <el-date-picker
                    v-model="fm.ps.reserveEtime"
                    type="date"
                    placeholder="预留结束时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="车辆大小" prop="note">
                  <el-input placeholder="车辆大小" v-model="fm.ps.seats" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="车辆数量" prop="note">
                  <el-input
                    placeholder="车辆数量"
                    v-model="fm.ps.reserveCount"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="预留备注" prop="note">
                  <el-input
                    type="textarea"
                    placeholder="请填写预留备注"
                    maxlength="500"
                    show-word-limit
                    v-model="fm.ps.note"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="text-align: center">
              <el-col>
                <el-form-item prop="find">
                  <el-button
                    @click="onSubmit"
                    :disabled="fm.sb.load"
                    type="primary"
                  >
                    {{ fm.sb.text }}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="rows"
        @pagination="getDgList"
      />
    </el-dialog>
    <LeaveCarList
      v-if="sd.addCar.state"
      :state="sd.addCar.state"
      :rowCar="rowCar"
      @addCarMdState="addCarMdState"
      @reloadDg="getDgList"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import elDragDialog from "@/directive/el-drag-dialog";
import moment from "moment";
import {
  modifyVehicleReserve,
  getAllSeats,
  findReserveEmptyCar,
  delVehicleReserve,
  companyVehicleReserves,
} from "@/api/services/logistics.service";
import Pagination from "@/components/Pagination";
import { findRepairTypeList } from "@/api/services/system.service";
import LeaveCarList from "./leave-car-list";
export default {
  name: "AddLeavercarList",
  directives: { elDragDialog },
  props: ["state", "leaveId"],
  components: { Pagination, LeaveCarList },
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
  },

  data() {
    return {
      page: 1,
      rows: 10,
      total: 0,
      tableDataCarList: [],
      tableData2: [],
      reserveType: "0",
      tabActiveKey: "1",
      isShowEditInput: false,
      tableData: [],
      isShowMap: false,
      md: {
        state: this.state,
      },
      sd: {
        addCar: {
          state: false,
        },
      },
      dg: {
        selRows: [],
      },
      fm: {
        fname: "AddMaintenance",
        sb: { load: false, text: "修改预留信息" },
        ps: {
          note: "", // 预留备注
          plateNum: "", // 车牌号，直接获取原记录车牌号，不能修改
          reserveCount: "", // 预留数量
          reserveEtime: "", // 预留结束时间
          vehicleIds: "", // 选中的车辆的ID
          reserveStime: "", // 预留开始时间
          seats: "", // 座位数
          reserveType: null, // 预留类型 ； 有车号 和无车号
        },
      },
      teamList: [],
      groupList: [],
      multipleSelection: [],
      poiList: [],
      currPoint: null,
      seatsList: [],
    };
  },
  watch: {
    activeName() {
      if (this.activeName == "notNumber") {
        this.getDgList();
      }
    },
  },
  created() {
    this.getDgList();
    console.log(this.leaveId, " thi. caiId");
  },
  methods: {
    init() {
      this.getDgList();
    },

    addCarMdState(e) {
      this.sd.addCar.state = e;
    },
    /**
     * 展开一行事件
     */
    saveRowExpand(row, expandedRows) {
      const that = this;

      // that.dg.rowExpands.push(row);
    },
    /**
     * 选中行
     * @param selection 选中的所有行
     * @param row       当前被点击的行
     */
    selRow(selection, row) {
      this.dg.selRows = [];
      // this.fm.ps = selection[0];
      if (this.dg.selRows.length > 0) return;
      this.dg.selRows = selection;
    },
    // 删除
    handleDel() {
      const length = this.dg.selRows.length;
      if (length != 1) {
        this.U.qerror("请选择一条需要删除的数据");
        return;
      }
      delVehicleReserve({
        reserveId: this.dg.selRows[0].id,
        vehicleId: this.leaveId,
      })
        .then((res) => {
          console.log(res, "resss");
          if (res.code == 1) {
            this.U.qsuccess("删除成功");
            this.getDgList();
          } else {
            this.U.qerror(res.msg);
          }
        })
        .catch((err) => {});
    },
    // 无车号查看车辆
    handleSearchCar(row) {
      console.log(row, "row");
      this.rowCar = row.row;

      // this.sd.addCar.state = true;
      this.addCarMdState(true);
    },
    // 修改
    handleEdit() {
      const length = this.dg.selRows.length;
      if (length != 1) {
        this.U.qerror("请选择一条需要修改的数据");
        return;
      }
      if (this.reserveType == 1) {
        const {
          reserveStime,
          reserveEtime,
          note,
          seats,
          reserveCount,
        } = this.dg.selRows[0];
        this.isShowEditInput = true;
        this.fm.ps.reserveStime = reserveStime;
        this.fm.ps.reserveEtime = reserveEtime;
        this.fm.ps.reserveCount = reserveCount;
        this.fm.ps.seats = seats;

        this.fm.ps.note = note;
      } else {
        const { reserveStime, reserveEtime, note } = this.dg.selRows[0];
        this.isShowEditInput = true;
        this.fm.ps.reserveStime = reserveStime;
        this.fm.ps.reserveEtime = reserveEtime;
        this.fm.ps.note = note;
      }
      const { reserveStime, reserveEtime, note } = this.dg.selRows[0];
      this.isShowEditInput = true;
      this.fm.ps.reserveStime = reserveStime;
      this.fm.ps.reserveEtime = reserveEtime;
      this.fm.ps.note = note;
    },
    handleTabClick(tabs) {
      console.log(tabs, "tabs");
      this.reserveType = tabs.name == "1" ? "0" : "1";
      // this.dg.selRows = [];
      this.getDgList();
      this.isShowEditInput = false;
    },
    getDgList() {
      let loading = this.U.qloading("数据请求中...");
      companyVehicleReserves({
        belongCompany: "",
        page: this.page,
        rows: this.rows,
        phone: "",
        plateNum: "",
        reserveType: this.reserveType,
      })
        .then((res) => {
          console.log("res1sadasdasd23", res);
          this.U.qclose(loading);
          const { code, data } = res;
          if (code === 1) {
            // this.seatsList = data;
            this.total = res.count;
            if (this.reserveType != 0) {
              this.tableData2 = data;
            } else {
              this.tableData = data;
            }
          }
        })
        .catch(() => {
          this.U.qclose(loading);
        });
    },

    /* 关闭弹框 */
    closeMd() {
      this.$emit("leaveCarListMdState", false);
    },
    /**
     * 表单提交=--- 查询
     */
    onSubmit() {
      this.$refs[this.fm.fname].validate((valid) => {
        if (!valid) {
          this.U.qerror("请填写必填项");
          return false;
        } else {
          const Stime =
            moment(this.fm.ps.reserveStime).format("YYYY-MM-DD") +
            " " +
            "00:00:00";
          const Etime =
            moment(this.fm.ps.reserveEtime).format("YYYY-MM-DD") +
            " " +
            "23:59:59";

          this.fm.ps.reserveStime = Stime;
          this.fm.ps.reserveEtime = Etime;
          let pd = null;
          if (this.reserveType == 1) {
            pd = {
              note: this.fm.ps.note,
              reserveEtime: this.fm.ps.reserveEtime,
              reserveStime: this.fm.ps.reserveStime,
              reserveType: this.reserveType,
              vehicleIds: [this.leaveId],
              seats: this.fm.ps.seats,
              reserveCount: this.fm.ps.reserveCount,
              reserveId: this.dg.selRows[0].id,
              plateNum: this.dg.selRows[0].plateNum,
            };
          } else {
            pd = {
              note: this.fm.ps.note,
              reserveEtime: this.fm.ps.reserveEtime,
              reserveStime: this.fm.ps.reserveStime,
              reserveType: this.reserveType,
              vehicleIds: [this.leaveId],
              reserveId: this.dg.selRows[0].id,
              plateNum: this.dg.selRows[0].plateNum,
            };
          }

          this.fm.sb.load = true;
          modifyVehicleReserve(pd)
            .then((res) => {
              if (res.code == 1) {
                this.closeMd();

                this.U.qsuccess("提交成功");
                this.fm.sb.load = false;
                // 调用父组件方法-重新加载数据
                that.$emit("reloadDg");
              } else {
                this.U.qsuccess(res.msg);
                this.fm.sb.load = false;
              }
              // 调用父组件方法-重新加载数据
              that.$emit("reloadDg");
            })
            .catch((err) => {
              this.fm.sb.load = false;
            });
        }
      });
    },
  },
};
</script>